<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
    <form class="layui-form" action="" style="margin-top: 15px;">

        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label">项目名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label">当前进度</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label">紧急程度</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label">任务人员</label>
            <div class="layui-input-block">
                <div id="demo1" class="xm-select-demo" ></div>
            </div>
        </div>

    </form>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/xm-select.js}"></script>
<script>
    layui.use('form', function() {
        var form = layui.form

        var demo1 = xmSelect.render({
            el: '#demo1',
            autoRow: true,
            filterable: true,
            direction: 'down',
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: [ -3 ],
            },
            toolbar: {
                show: true,
                list: ['ALL', 'REVERSE', 'CLEAR']
            },
            height: 'auto',
            data(){
                return [
                    {name: '销售员', value: -1, disabled: true, children: [
                            {name: '张三1', value: 1, selected: false, children: []},
                            {name: '李四1', value: 2, selected: false},
                            {name: '王五1', value: 3, disabled: true},
                        ]},
                    {name: '奖品', value: -2, children: [
                            {name: '奖品3', value: -3, children: [
                                    {name: '苹果3', value: 14, selected: false},
                                    {name: '香蕉3', value: 15},
                                    {name: '葡萄3', value: 16},
                                ]},
                            {name: '苹果2', value: 4, selected: false, disabled: true},
                            {name: '香蕉2', value: 5},
                            {name: '葡萄2', value: 6},
                        ]},
                ]
            }
        })
    })
</script>
</html>